<template>
    <div class="pages list" >
      <div class="g-container" id="container">
        <div class="weui-cells" v-if='hasData' style="margin-top:0px;">
          <div class="month" v-text="month">2017年7月</div>
          <scroller lock-x scrollbarY @on-scroll-bottom="onScrollBottom" @on-scroll='scrolls' height='-40' ref="scrollerBottom">
            <div class="box2">
              <div class="listCell" v-for="list in listMap" :key="list" @click='godetails(list.id)'>
                  <div class="listCell-top">{{list.data}} {{list.time}}</div>
                  <div class="weui-cell-top">
                    <div class="weui-cell-pai colorCCC">{{list.wlname}} x {{list.count}}</div>
                      <div class="weui-cell__ft color4a4">{{list.status}}</div> 
                  </div>
                  <div class="listCell-bottom colorCCC">{{list.kpname}}</div>
              </div>
              <load-more tip="正在加载…" background-color="red" v-if='!nomore' ></load-more>
              <div class="nomore" v-if = 'nomore'>没有更多记录了</div>
            </div>
          </scroller>
        </div>
        <div v-else class="nodata" >
          <img src="../../assets/nodata.png" alt="nodata">
          <p>您暂时还没有申请记录。</p>
          <p class="jilu"><a href="#/index">再次申请</a></p>
        </div>
      </div>
    </div>
</template>
<script>
import { Group, Cell,Scroller,LoadMore,Divider   } from 'vux'
export default {
  name: 'list',
  components:{
    Group,Cell,Scroller,LoadMore ,Divider 
  },
  data () {
    return {
      listMap:[],
      nomore:false,
      hasData:true,
      month:'',
      a:0,
      onFetching: false
    }
  },
  created: function(){
    this.$http.get('/static/list.action').then((response)=>{
        var datas = response.data;
        // console.log(datas)
        if(datas){
            this.listMap=(datas) ;
            this.hasData = true;
            var monthArr = this.listMap[0].data.split('-');
            this.month = monthArr[0]+'年'+monthArr[1]+'月'
          }else{
            this.listMap='';
            this.hasData = false;
          }
      },(response) => {
					console.log(response.data)
      })
  },
  
  methods:{
    onScrollBottom () {
      if (this.onFetching) {
        // do nothing
      } else {
        this.onFetching = true;
        var that = this;
        if(this.a>4){
          this.nomore = true;
          return false
        }
        setTimeout(function(){
          that.$http.get('/static/list1.action').then((response)=>{
            that.a++;
            var datas = response.data;
            // console.log(datas)
            if(datas){
              for(var i=0;i<datas.length;i++){
                that.listMap.push(datas[i]) ;
              }
            }else{
                that.listMap='';
            }
          },(response) => {
            console.log(response.data)
          })
          that.$nextTick(() => {
            that.$refs.scrollerBottom.reset()
          })
          that.onFetching = false
        },1000)
      }
    },
    scrolls(val){
      this.$refs.scrollerBottom.reset();
      //滑动获取实时列表
      if(val.top>0){
        var cur = Math.ceil(val.top/96)
        var monthArr = this.listMap[cur].data.split('-');
        this.month = monthArr[0]+'年'+monthArr[1]+'月'
      }
    },
    godetails(val){
      this.$router.push({path:'/listdetails/'+val});
      console.log(val)
    }
  }
}
</script>

<style scoped lang="less">

.list{ 
  .month{
    color: #4A4A4A;
    padding:10px 15px;
    background: #F2F3F4;
  }
  .box2 *{
    font-size: 14px;
    background: #fff;
  }
  .nodata{
    background: #F2F3F4;
    text-align: center;
    padding-top: 8rem;
    p{
      color: #9B9B9B;
      background: #F2F3F4;
    }
    img{
      width: 100px;
      background: #F2F3F4;
    }
    a{
      background: #F2F3F4;
      font-size: 16px!important;
    }
  }
  .box2{
    position: relative;
    &:before{
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      left: 0px;
      z-index: 1;
    }
  }
  .listCell{
    position: relative;
    background: #fff;
    .listCell-top{
      padding: 10px 15px 5px;
    }
    .listCell-bottom{
      padding: 5px 15px 10px;
      overflow: hidden;
      white-space : nowrap; 
      text-overflow: ellipsis;
    }
    &:first-child{
      &:before{
        display: none;
      }
    }
    &:before{
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      left: 15px;
    }
  }
  .weui-cell-top{
    padding: 0px 15px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .weui-cell-pai{
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  }
  .colorCCC{
    color: #CCCCCC;
  }
  .weui-cell__ft.color4a4{
    color: #4a4a4a
  }
  .jilu *{
    font-size: 16px;
  }
  .nomore{
    font-size: 14px;
    color: #646464; 
    background: #f2f3f4;
    text-align: center;
    padding: 15px;
  }
  .weui-loadmore{
    margin: 0;
    width: 100%;
    background: #f2f3f4;
    padding: 15px 0;
  }
}
</style>
